<template>
   <div>
        <div class="accounthead">
                <img src="../../assets/jia.png" alt="">
                <span>新建任务</span>
        </div>

       <div class="bigbox">

           <div class="newbody">
               <div class="newbodyhead"><span>2.定义搜索内容</span></div>
           </div>

            <div class="company">
               <span>公司名称</span>
               <div>
                     <input type="text" class="companyname" placeholder="请输入公司全称" v-model="companyName">
               </div> 
            </div>

            <div class="subject">
               <div class="subjecttitle">
                  <span>主体</span>
                  <span class="subjecttitle2">请输入主体（一行一个）</span>
               </div>
               <textarea v-model="subjectText"></textarea>
            </div>

            <div class="keyword">
               <div class="keywordhead">
                  <span>关键词</span>
                  <span class="right" @click="SelectFormVisible = true">选择其他模板</span>
               </div>

               <div class="keywordbody">
                  <div class="keywordbodyT">
                     <span>{{defaultname}}</span>
                     <span class="key15">默认模板</span>
                     <!-- <img src="../../assets/pen.png" class="penico" alt="" @click="exitFormVisible = true"> -->
                     <svg version="1.1" class="penSvg penico" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                        viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve" @click="openmoren">>
                     <rect x="-354.3" y="-271.1" class="st0" width="20" height="20"/>
                     <polygon class="st1" points="1.7,18.5 2.5,14.8 5.3,17.6 "/>
                     <g>
                        <path class="st1" d="M18.5,4.3l1-1c0.2-0.2,0.2-0.5,0-0.7l-2.1-2.1c-0.2-0.2-0.5-0.2-0.7,0l-1,1L18.5,4.3z"/>
                        <rect x="1.7" y="7.6" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -3.6929 10.2382)" class="st1" width="17.7" height="3.9"/>
                     </g>
                     </svg>
                  </div>
                  <div class="keywordbodyB">
                     <span>更新于{{defaulttime}}</span>
                  </div>
               </div>

               <div class="keyfoot">
                   <div class="keywordfoot">
                     <el-button @click="goback">返回</el-button>
                     <el-button type="primary" @click="addNegativebtn">确认</el-button>
                  </div>
               </div>
            </div>
       </div>

       <!-- 这是编辑模板的代码 -->
      <el-dialog title="编辑模板" :visible.sync="exitFormVisible">
         <el-form>
           <div class="moudlename">
              <div>模板名称</div>
              <input type="text" class="moudleinput" placeholder="模板名称" v-model="defaultname">
           </div>

            <div class="moudlecon">
               <div class="text1">关键词模板</div>
               <div class="text2">请输入关键字（一行一个）</div>
               <textarea v-html="mStr" @change="changeText1"></textarea>
               <!-- <el-checkbox>设为默认模板</el-checkbox> -->
            </div>
         </el-form>
          <!-- v-html="updateLi.textareaText"  @click="exittemplateistok"  v-model="checked"-->

         <div slot="footer" class="dialog-footer">
            <el-button @click="exitFormVisible = false">取 消</el-button>
            <el-button type="danger" @click="updateOK">保 存</el-button>
         </div>
      </el-dialog>

       <!-- 这是选择关键词模板的代码 -->
      <el-dialog title="选择关键词模板" :visible.sync="SelectFormVisible">
         <el-form>
           <div class="searchbox">
                <el-input placeholder="请输入模板名称" v-model="searchcon" class="input-with-select searchInput" @keyup.native.enter="searchBtn">
                    <el-button slot="append" icon="el-icon-search" class="searchBtn" @click="searchBtn"></el-button>
                </el-input>
            </div>
         </el-form>

          <div class="keyword keywordTop"  v-for="(item, index) in allTemplates" :key="index" @click="replaceTemplate(item.id)">
              <!-- <div class="keywordhead">
                  <span>关键词</span>
                  <span class="right">选择其他模板</span>
              </div> -->
              <div class="keywordbody">
                  <div class="keywordbodyT">
                      <span>{{item.name}}</span>
                       <!-- @click.stop="" -->
                      <span class="key15"  @click.stop=""> <el-radio v-model="morenradio" :label="item.id" @change="changeRadio(item.id)">默认模板</el-radio></span>
                      <span @click.stop="">
                         <!-- <img src="../../assets/pen.png" class="penico" @click="selectKeyword(item.id)" alt=""> -->
                         <svg version="1.1" class="penSvg penico" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                        viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve" @click="selectKeyword(item.id)">>
                     <rect x="-354.3" y="-271.1" class="st0" width="20" height="20"/>
                     <polygon class="st1" points="1.7,18.5 2.5,14.8 5.3,17.6 "/>
                     <g>
                        <path class="st1" d="M18.5,4.3l1-1c0.2-0.2,0.2-0.5,0-0.7l-2.1-2.1c-0.2-0.2-0.5-0.2-0.7,0l-1,1L18.5,4.3z"/>
                        <rect x="1.7" y="7.6" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -3.6929 10.2382)" class="st1" width="17.7" height="3.9"/>
                     </g>
                     </svg>
                         </span>
                  </div>
                  <div class="keywordbodyB">
                      <span>更新于{{item.updateTime}}</span>
                  </div>
              </div>
          </div>

          <div class="pagebox">
            <div class="block">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage3"
                :page-size="3"
                layout="total, prev, pager, next, jumper"
                :total= pagetotal>
                </el-pagination>
            </div>
         </div>

          <!-- v-html="updateLi.textareaText"  @click="exittemplateistok"  v-model="checked"-->

         <!-- <div slot="footer" class="dialog-footer">
            <el-button @click="SelectFormVisible = false">取 消</el-button>
            <el-button type="danger">确 定</el-button>
         </div> -->
      </el-dialog>


      <el-dialog title="编辑模板" :visible.sync="exitFormVisible2">
         <el-form>
           <div class="moudlename">
              <div>模板名称</div>
              <input type="text" class="moudleinput" placeholder="模板名称" v-model="defaultname2">
           </div>

            <div class="moudlecon">
               <div class="text1">关键词模板</div>
               <div class="text2">请输入关键字（一行一个）</div>
               <textarea v-html="mStr2" id="Strtext" @change="changeText"></textarea>
               <!-- <el-checkbox>设为默认模板</el-checkbox> -->
            </div>
         </el-form>
          <!-- v-html="updateLi.textareaText"  @click="exittemplateistok"  v-model="checked"-->

         <div slot="footer" class="dialog-footer">
            <el-button @click="exitFormVisible2 = false">取 消</el-button>
            <el-button type="danger" @click="updateKey2(updatekeyid)">保 存</el-button>
         </div>
      </el-dialog>




   </div>
</template>

<script>
import { addNegative,getModuleInsert1,getTempltateUpdateList,UpdataTemplate,getModule, ChangeUpdateModule } from '@/api'
export default {
   data () {
      return {
         companyName: '',
         subjectText: '',
         exitFormVisible: false,
         SelectFormVisible: false,
         formLabelWidth: '120px',
         mids: '', // 模板id
         tids: '', // 模块id
         defaultname: '',
         defaultname2: '', 
         defaulttime: '',
         searchcon: '',
         morenradio: '',
         mStr: '',
         userData: 1,
         allTemplates: [],
         exitFormVisible2: false,
         mStr2: '',
         pagenum: 1,
         pagetotal: 1,
         currentPage3: 5,
         updatekeyid: 1,
         morenmids: 0 // 默认模块
      }
   },
   created () {
      this.ModuleInsert1()
   },
   mounted () {
   //let sha256 = require("js-sha256").sha256//这里用的是require方法 
   //console.log(sha256)
   //   let userData = sha256.encode(localStorage.getItem('userData'))
   let userData =localStorage.getItem('userData')
   this.userData = userData
   //   console.log(userData)


   },
   methods: {
      openmoren() {
         this.exitFormVisible = true
         console.log(this.tids)
         // getTempltateUpdateList(id) 
         getTempltateUpdateList(this.tids) 
            .then(res => {
               // console.log(res)
               let keywords = res.data.keywords;
               let mStr = ""
               // console.log(this.keywords)
               for(let i = 0; i < keywords.length; i++ ) {
                        // console.log(mArr[i])
                         mStr += keywords[i].content + '&#10;'
                    }
                  //   console.log(mStr)
                    this.mStr = mStr
                  //   console.log(this.mStr)
            })
      },
      searchBtn() {
         var obj = {
               id: this.mids,
               pageNum: 1,
               templateName: this.searchcon 
            }
            // console.log(obj)
            // ckj 用id获取模块详细信息
            getModule(obj)
            .then(res => {
               // console.log(res)
               // this.pagetotal = res.data.templatePages
               this.pagetotal = res.data.templateTotal
               this.allTemplates = res.data.templates
               this.morenmids = res.data.id
            })
      },
      handleSizeChange(val) {
        },
        handleCurrentChange(val) {
         //   console.log(val)
            this.pagenum = val
            var obj = {
                  id: this.mids,
                  pageNum: this.pagenum,
                  templateName: this.searchcon 
               }
               console.log(obj)
               getModule(obj)
               .then(res => {
                  console.log(res)
                  // this.pagetotal = res.data.templatePages
                  this.pagetotal = res.data.templateTotal
                  this.allTemplates = res.data.templates
               })
        },
      // ckj 更改默认模板
      changeRadio(tid) {
         // console.log(tid)
         // console.log(this.morenmids)
         let obj = {
            mid: this.morenmids,
            tid: tid
         }
         // console.log(obj)
         ChangeUpdateModule(obj)
         .then(res => {
             if(res.statusCode == 200) {
                    this.$message({
                        message: res.statusMsg,
                        type: 'success'
                    });
                } else {
                     this.$message({
                        message: res.statusMsg,
                        type: 'error'
                    });
                }
         })
         // console.log(tid)
      },
      changeText(e) {
         // console.log(e)
         this.mStr2 = e.target.value 
      },
      changeText1(e) {
         this.mStr = e.target.value 
      },
      // ckj 点击修改关键字
      updateKey2(updatekeyid) {
         // console.log(updatekeyid)
         // let keyContents = (this.mStr2.trim().split(/\n+/)).join('+')
         // let keyContents = this.mStr2.replace(/&#10;/g, '+')
          let keyContents = (this.mStr2.trim().split(/\n+/)).join('+')
         keyContents = keyContents.replace(/&#10;/g, '+')
         // console.log(keyContents)
         // keyContents = keyContents.substring(0, keyContents.length - 1)
         console.log(keyContents)
         let obj = {
            id: updatekeyid,
            name: this.defaultname2,
            keyContents: keyContents
         }
         if(keyContents.charAt(keyContents.length - 1) == '+') {
            keyContents = keyContents.substring(0, keyContents.length - 1)
        }
         UpdataTemplate(obj)
         .then(res => {
            console.log(res)
            if(res.statusCode ===200) {
               this.$message({
                  message: res.statusMsg,
                  type: 'success'
               });
               this.exitFormVisible2 = false
            } else {
               this.$message({
                  message: res.statusMsg,
                  type: 'success'
               });
            }
         })
         // console.log(obj)
      },
      // ckj 更换模板(修改)
      replaceTemplate(id) {
         // console.log(id)
         getTempltateUpdateList(id)
         .then(res => {
            console.log(res)
            this.defaultname =res.data.name
            this.defaulttime = res.data.updateTime
            this.SelectFormVisible = false

            this.tids = res.data.id
            this.mids = res.data.module.id
            // console.log(this.tids)
            // console.log(this.mids)

            getTempltateUpdateList(this.tids) 
            .then(res => {
               // console.log(res)
               let keywords = res.data.keywords;
               let mStr = ""
               // console.log(this.keywords)
               for(let i = 0; i < keywords.length; i++ ) {
                        // console.log(mArr[i])
                         mStr += keywords[i].content + '&#10;'
                    }
                  //   console.log(mStr)
                    this.mStr = mStr
                  //   console.log(this.mStr)
            })

         })
      },
      // 点击编辑的时候
      selectKeyword(id) {
         this.exitFormVisible2 = true
         // console.log(id)
         getTempltateUpdateList(id) 
            .then(res => {
               // console.log(res)
               this.updatekeyid = res.data.id
               this.defaultname2 = res.data.name
               // console.log(this.defaultname2)
               let keywords2 = res.data.keywords;
               let mStr2 = ""
               // console.log(this.keywords)
               for(let i = 0; i < keywords2.length; i++ ) {
                        // console.log(mArr[i])
                         mStr2 += keywords2[i].content + '&#10;'
                    }
                  //   console.log(mStr)
                    this.mStr2 = mStr2
               
            })
      },
      // ckj 确定编辑代码   hhhh
      updateOK() {
         // console.log(this.mids)
         // console.log(this.mStr)
         let keyContents = (this.mStr.trim().split(/\n+/)).join('+')
         keyContents = keyContents.replace(/&#10;/g, '+')
         // console.log(keyContents)
         // keyContents = keyContents.substring(0, keyContents.length - 1)
         if(keyContents.charAt(keyContents.length - 1) == '+') {
            keyContents = keyContents.substring(0, keyContents.length - 1)
         }
         console.log(keyContents)
         let obj = {
            id: this.tids,
            name: this.defaultname,
            keyContents: keyContents
         }
         // console.log(obj)
         UpdataTemplate(obj)
         .then(res => {
            if(res.statusCode ===200) {
               this.$message({
                  message: res.statusMsg,
                  type: 'success'
               });
               this.exitFormVisible = false
            } else {
               this.$message({
                  message: res.statusMsg,
                  type: 'success'
               });
            }
         })
      },
      goback() {
         this.$router.go(-1)
      },
      // 用负面舆情创建任务时获取用户的负面舆情模块详细信息 
      ModuleInsert1() {
         getModuleInsert1().then(res=> {
            // console.log(res.data)
            this.morenradio = res.data.templates[0].id
            // console.log(this.morenradio)
            this.mids = res.data.id
            this.tids = res.data.defaultTempId
            this.defaultname = res.data.templates[0].name
            this.defaulttime = res.data.templates[0].updateTime
            // console.log(this.defaultname)
            // console.log(this.defaulttime)
             getTempltateUpdateList(this.mids) 
            .then(res => {
               // console.log(res)
               let keywords = res.data.keywords;
               let mStr = ""
               // console.log(this.keywords)
               for(let i = 0; i < keywords.length; i++ ) {
                        // console.log(mArr[i])
                         mStr += keywords[i].content + '&#10;'
                    }
                  //   console.log(mStr)
                    this.mStr = mStr
               
            })

            var obj = {
               id: this.mids,
               pageNum: this.pagenum,
               templateName: this.searchcon 
            }
            // console.log(obj)
            // ckj 用id获取模块详细信息
            getModule(obj)
            .then(res => {
               // console.log(res)
               this.pagetotal = res.data.templateTotal
               this.allTemplates = res.data.templates
               this.morenmids = res.data.id
            })
         })
      },
      addNegativebtn() {
      let subjectText = (this.subjectText.trim().split(/\n+/)).join('+')
      //   console.log(subjectText)
        var obj = {
           companyName: this.companyName,
           entity: subjectText,
           mids: this.mids,
           tids: this.tids
        }
        console.log(obj)
         if(obj.companyName == '') {
            this.$message({
            message: '公司名称不能为空',
            type: 'warning'
         });
         return false
         }

         if(obj.entity == '') {
            this.$message({
            message: '主体不能为空',
            type: 'warning'
         });
         return false
         }

         // 添加任务的
         addNegative(obj)
         .then(res => {
            // console.log(res)
            if(res.statusCode == 200) {
               this.$message({
                  message: res.statusMsg,
                  type: 'success'
               });
               this.$router.push({path: '/finishFeature'})
            } else {
               this.$message.error(res.statusMsg);
            }
         })
      }
   }


}
</script>

<style lang="scss" scoped>
.penSvg {
   width: 20px;
   height: 20px;
}
   .accounthead {
      background-color: #f9f6f9;
        position: relative;
        text-align: left;
        width: 100%;
        height: 70px;
        font-size: 22px;
        line-height: 86px;
        // border-bottom: 1px solid #ccc;
        img {
            margin-left: 20px;
        }
        span {
            position: absolute;
            bottom: -9px;
            left: 60px;
            // margin-bottom: 10px;
            // margin-left: 19px;
        }
    }

    .bigbox {
       background-color: #fff;
       padding-left: 161px;
        padding-right: 161px;
    }
    .newbody {
       background-color: #fff;
       width: 100%;
      //  padding-left: 69px;
       .newbodyhead {
          position: relative;
          text-align: left;
          font-size: 30px;
          height: 112px;
          line-height: 112px;
          span {
             position: absolute;
             left: -100px;
            //  margin-left: 69px;
          }
       }
    }

    .company {
       text-align: left;
       span {
          font-size: 20px;
       }
       .companyname {
          font-family:"Microsoft YaHei";
          margin-bottom: 14px;
          text-indent: 10px;
          font-size: 16px;
          width: 600px;
          height: 45px;
          border:1px solid rgba(191,191,191,1);
       }
    }

    .subject {
       text-align: left;
       .subjecttitle {
          font-size: 20px;
          .subjecttitle2 {
              font-size: 13px;
          }
       }
       textarea {
          font-family:"Microsoft YaHei";
          font-size: 16px;
          height: 290px;
          width: 100%;
       }
    }

    .keyword {
       position: relative;
       width: 100%;
       font-size: 18px;
       box-sizing: border-box;
       .keywordhead {
          text-align: left;
          .right {
             cursor: pointer;
             color: #B25262;
             font-size: 13px;
             float: right;
          }
       }
       .keywordbody {
          box-sizing: border-box;
          border: 1px solid #c9c9c9;
          border-radius: 4px;
          height: 128px;
          width: 100%;
          padding: 0 20px;
          .keywordbodyT {
             height: 50%;
            text-align: left;
            line-height: 60px;
            border-bottom: 1px solid #ccc;
            .penico {
               float: right;
               margin-top: 22px;
            }
            .key15 {
               color: #4F8AC1;
               font-size: 15px;
            }
          }
          .keywordbodyB {
             color: #7E7E7E;
             font-size: 15px;
             text-align: left;
          }
       }
       .keyfoot {
          position: relative;
          height: 175px;
          width: 100%;
          .el-button {
             width: 116px;
             height: 44px;
          }
          .keywordfoot {
          position: absolute;
          right: 0;
          bottom: 40px;
         }
      }
       
    }

    .moudlename {
       text-align: left;
       >div {
          font-size: 20px;
       }
       .moudleinput {
          width: 256px;
          height: 35px;
          font-size: 18px;
       }
    }

    .moudlecon {
       text-align: left;
       .text1 {
          font-size: 20px;
          color: #5D5D5D;
       }
       .text2 {
          color: #666666;
          font-size: 13px;
       }
       textarea {
          width:100%;
          height:292px;
       }
    }

    .searchbox{
         height: 50px;
         background-color: #fff;
        position: relative;
        .searchInput {
            position: absolute;
            left: 0;
            // transform: translateX(-50%);
            margin: 0 auto;
            width: 327px;
        }
        .searchBtn {
           height: 100%;
            // background-color: #BFBFBF;
            background-color: #f5f7fa;
        }
    }

    .keyword {
      //  margin-top: 10px;
       position: relative;
       width: 100%;
       font-size: 18px;
       box-sizing: border-box;
       .keywordbody {
          box-sizing: border-box;
          border: 1px solid #c9c9c9;
          border-radius: 4px;
          height: 128px;
          width: 100%;
          padding: 0 20px;
          .keywordbodyT {
             height: 50%;
            text-align: left;
            line-height: 60px;
            border-bottom: 1px solid #ccc;
            .penico {
               float: right;
               margin-top: 22px;
            }
            .key15 {
               color: #4F8AC1;
               font-size: 15px;
            }
          }
          .keywordbodyB {
             color: #7E7E7E;
             font-size: 15px;
             text-align: left;
          }
       }
    }

    .keywordTop {
       margin-top: 10px;
    }

    .pagebox {
        width: 100%;
        height: 48px;
        background-color: #fff;
    }
    .page {
        background: #fff;
        float: right;
        .pageInput {
            margin: 0 10px;
            height: 20px;
            width: 38px;
        } 
    }
        .angle {
        display: inline-block;
        transform:rotate(-90deg);
        cursor: pointer;
    }
    
</style>

